<!-- 统计卡片 -->
<template>

  <el-card class="analysis-chart-card"
           shadow="never"
           style="min-height:562px;overflow:auto">
    <div class="flex-between m-bottom15">
      <div class="">业务类型</div>
      <div class=" flex">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link ">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="!isSelect?true:false"
                              command="1">消费扣款</el-dropdown-item>
            <el-dropdown-item :disabled="!isSelect?true:false"
                              command="2">余额充值</el-dropdown-item>
            <el-dropdown-item :disabled="!isSelect?true:false"
                              command="3">开通套餐卡</el-dropdown-item>
            <el-dropdown-item :disabled="!isSelect?true:false"
                              command="4">套餐卡核销</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </div>
    <div v-if="isSelect">
      <div v-if="cashierType==1">
        <div class="m-bottom10">线下商城抵扣</div>
        <el-input v-model="consumptionform.amount"
                  type="number"
                  v-focus
                  placeholder="请输入需要扣款金额"></el-input>

        <div>
          <el-button class="fixed"
                     @click="consumptionSettlementFn()"
                     type="primary">
            结算
          </el-button>
        </div>
      </div>
      <el-drawer title="余额结算"
                 :visible.sync="consumptionDrawer"
                 :before-close="handleClose">
        <div class="padding15 ">
          <div style="height: 150px;"
               class="flex-column">
            <div class="font-weight font-size_24px">结算金额:<span style="color: red;">￥{{consumptionform.amount}}</span></div>
            <div class="font-weight font-size_18px">商品折扣{{consumptionDiscount/10}}折,优惠价格:<span style="color: red;">￥{{(Math.floor(consumptionform.amount* Number(consumptionDiscount) ) / 100).toFixed(2)  }}</span></div>
          </div>
          <div class="m-bottom10 m-top20">
            线上扫码
          </div>
          <div class="flex-wrap-justifyBetween">
            <div v-for="(item,index) in consumptionList"
                 :key="index"
                 v-show="item.text">
              <div @click="consumptionRechargePrice(index,item)"
                   :class="['flex-column',xScpcurrentIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
                <div class="flex">

                  <img class="avater"
                       :src="item.img"
                       alt="">

                  <div class="">
                    <span style="color: rgb(51, 51, 51);">{{item.text}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class=" m-top10">
            线下扣款
          </div>
          <div class="flex-wrap-justifyBetween "
               style="margin-bottom: 20px">
            <div v-for="(item,index) in xxPaymentTypeList"
                 :key="index"
                 style="overflow:auto">
              <div @click="xXconsumptionPrice(index)"
                   :class="['flex-column',xXcpcurrentIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
                <div class="flex">

                  <img class="avater"
                       :src="item.img"
                       alt="">

                  <div class="">
                    <span style="color: rgb(51, 51, 51);">{{item.text}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-form ref="consumptionform"
                   @submit.native.prevent
                   :model="consumptionform"
                   label-width="100px">
            <el-form-item label="余额码:"
                          prop="name"
                          v-if="consumptionform.pay_way == 1">
              <el-input clearable
                        ref="InputWarp"
                        v-focus
                        :maxlength="100"
                        @keyup.native="handleKeyUp"
                        v-model="consumptionform.random_code"
                        placeholder="余额码参数" />
            </el-form-item>
            <el-form-item v-if="consumptionform.pay_way == 7||consumptionform.pay_way == 8"
                          label="条形码:"
                          prop="name">

              <el-input clearable
                        ref="InputWarp"
                        v-focus
                        :maxlength="100"
                        @keyup.native="handleKeyUp"
                        v-model="consumptionform.auth_code"
                        placeholder="条形码参数">
              </el-input>

            </el-form-item>
          </el-form>
          <el-button class="fix flex "
                     type="primary"
                     :loading="loading"
                     @click="consumptionPayment()">实付：￥{{(Math.floor(consumptionform.amount* Number(consumptionDiscount) ) / 100).toFixed(2)  }} </el-button>
        </div>
      </el-drawer>
      <!-- <div v-if="cashierType==1">
		  <el-button v-if="goodsInfoBol"
					 class="width100"
					 @click="cs()">+ 选择商品</el-button>
		  <div v-else>
			<div class="flex-between">
			  <div class=" font-weight m-algin10">购买商品</div>
			  <div style="color: #fff;height: 30px;width: 50px;background-color: red;text-align: center;line-height: 30px;"
				   class=" font-weight m-algin10"
				   @click="couponCollection()">领券</div>
			</div>
			<div class="orderPageDescribe flex-start">
			  <div @click="cs()">
				<img style="width: 180px; height:180px"
					 :src="goodsInfo.host_img[0]"
					 alt="">
  
			  </div>
			  <div class="flex-column-between  margin-left_20px"
				   style="height: 186px ;">
				<div class="font-overflow2"
					 @click="cs()">
				  {{goodsInfo.name}}
				</div>
				<div class="font-overflow2"
					 @click="cs()">
				  {{goodsInfo.title}}
				</div>
				<div class="flex-start-center">
				  <div style="color: rgb(255, 0, 0);">
					￥{{goodsInfo.price}}
				  </div>
				  <div class="margin-left_20px"
					   style="color: rgb(255, 0, 0);">
					<span>数量x{{Number(goodsform.number)}}</span>
				  </div>
				</div>
			
		<div class="flex-between">
		  <div style="margin: 20px 0;font-weight: 600;">
			购买数量
		  </div>
		  <div class="">
  
			<el-input-number v-model="vModelValue"
							 @change="changeNumber "
							 :min="1"
							 size="mini"
							 label="描述文字"></el-input-number>
		  </div>
		</div>
  
	  </div>
  
	  </div>
	  <div class=" m-top10 m-bottom10">
		<div class="flex-between"
			 v-if="goodsInfo.buying_pattern==1">
		  <div>当前积分:{{userInfo.surplus_integral }}</div>
  
		  <div>可抵扣{{deduction_integral_ratio?deduction_integral_ratio+'元':0+'元'}}<el-checkbox style="margin-left: 10px;"
						 @change="radioChange"
						 v-model="checked"></el-checkbox> </div>
		</div>
		<div style="height:10px"
			 v-else>
  
		</div>
	  </div>
	  <div v-infinite-scroll="loadCoupon"
		   style="overflow-y: auto;height: 160px;">
  
		<div v-for="(item,index) in couponLists"
			 :key="index">
		  <div class="content ">
			<div class="positionCoupon  flex">
			  <span class="font-overflow">{{item.name}}</span>
			</div>
			<div class="couponPrice">
			  <div class="flex-between ">
				<div class="flex">
				  <div style="min-width: 70px"
					   class="left">
					<span style="color: rgb(255, 0, 0)">￥</span>
					<span style="color: rgb(255, 0, 0);font-family: Inter;font-size: 32px;">{{totelName(item.discount_intensity)}}</span>
				  </div>
				  <div class="flex-columns"
					   style="height: 77px;justify-content: space-between;">
					<span style="color: rgb(255, 0, 0);font-size: 18px">{{ item.type === 3 ? '无门槛福利优惠券' : '满' + totelName(item.trigger_amount) + '减' +totelName(item.discount_intensity)  + '元' }}</span>
					<span style="color: rgb(255, 0, 0);font-size: 18px">{{item.desc }}</span>
					<span style="color:rgb(153, 153, 153);font-size: 12px">{{extractedDate(item.effective_time) }}到期
					</span>
				  </div>
				</div>
				<div class="claimNow flex"
					 @click="receiveCoupons(item,index)">
				  {{selectCouponIndex==index?'取消选择':'立即选择'}}
				</div>
			  </div>
			</div>
		  </div>
		</div>
		<p v-if="couponloading">加载中...</p>
		<p class="flex margin_20px_0"
		   v-if="noMoreCoupon&&couponLists.length">没有更多优惠券了</p>
		<ele-empty v-if="noMoreCoupon&&!couponLists.length"
				   class="flex-column"
				   style="height: 100px;"
				   text="哎呀, 还没有优惠券~" />
	  </div>
  
	  <div class="flex-between Deduction m-top10">
		<div class="">
		  会员折扣
		</div>
		<div style="color: rgb(255, 0, 0);">
		  {{discount/10}}折
		</div>
	  </div>
	  <div class="flex-between Deduction m-top10">
		<div class="">
		  支付金额
		</div>
		<div style="color: rgb(255, 0, 0);">
		  <span style="color: rgb(255, 0, 0);font-size: 40rpx;">￥{{finalPrice(goodsInfo.price*Number(this.goodsform.number),discountPrice)}}</span>
		</div>
	  </div>
	  </div>
	  </div> -->
      <div v-if="cashierType==2">
        <el-input v-model="form.changeValue"
                  type="number"
                  @focus="focusInput()"
                  placeholder="请输入其他金额"></el-input>
        <div class="m-top15 ">
          <div class="">充值赠送</div>

          <div class="flex-wrap-justifyBetween">
            <div v-for="(item,index) in balanceRechargeList"
                 :key="index">
              <div @click="switchRechargePrice(index,item)"
                   :class="['flex-column',currentIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
                <div class="margin-bottom_10px font-weight_bold"
                     style="color: rgb(255, 0, 0);">
                  ￥{{item.amount}}
                </div>
                <div class="">
                  <span style="color: rgb(51, 51, 51);">赠送{{item.give_amount}}</span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <el-button class="fixed"
                   @click="nextStep()"
                   type="primary"
                   style="margin-left: 16px;">
          下一步
        </el-button>
      </div>
      <div v-if="cashierType==3">

        <div v-infinite-scroll="load"
             style="overflow-y: auto;height: 493px;">

          <!-- <div v-for="(item,index) in packageOrderLists"
			   class="infinite-list-item"
			   :key="index">{{ index }}</div> -->
          <div v-for="(item,index) in packageOrderLists"
               :key="index"
               class="packageCardArr"
               :style="{ '--bg-image': `url(${item.style})` }">
            <div class="flex-between "
                 style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20px;">
              <div class="flex">
                <img class="avater"
                     :src="item.logo"
                     alt="">

                <div class="flex-column-between-start">
                  <div class="font-overflow centerText price font-weight_bold"> {{item.name}} </div>

                  <div class="font-overflow centerText price font-weight_bold">{{item.desc}}</div>
                </div>
              </div>

              <div class="rechargeBtn flex"
                   @click="cardPurchase(item)">
                购卡
              </div>

            </div>

            <div class="margin-top_20px">
              <span class="font-overflow centerText  priceText font-weight_bold margin-right_16px">{{'已有'+item.sales_volume+'人付款'}}</span>
              <span class="font-overflow centerText  priceText font-weight_bold">充值金额：{{item.sales_amount}}</span>
            </div>

          </div>
          <p v-if="loading">加载中...</p>
          <p class="flex margin_20px_0"
             v-if="noMore">没有更多了</p>
        </div>

      </div>
      <div v-if="cashierType==4">
        <div style="margin-bottom: 20px;"
             v-if="packAgeCardInfo"
             class="packageCardArr"
             :style="{ '--bg-image': `url(${packAgeCardInfo?.style})` }">
          <div class="flex-between "
               style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20px;">
            <div class="flex">
              <img class="avater"
                   :src="packAgeCardInfo?.logo"
                   alt="">

              <div class="flex-column-between-start">
                <div class="font-overflow centerText price font-weight_bold"> {{packAgeCardInfo?.name}} </div>

                <div class="font-overflow centerText price font-weight_bold">{{packAgeCardInfo?.desc}}</div>
              </div>
            </div>

            <!-- <div class="rechargeBtn flex"
				   @click="cardPurchase(packAgeCardInfo)">
				购卡
			  </div> -->

          </div>

          <div class="margin-top_20px">
            <span class="font-overflow centerText  priceText font-weight_bold margin-right_16px">已经使用{{Number(packAgeCardInfo?.total_num)-Number(packAgeCardInfo.num)}}</span>
            <span class="font-overflow centerText  priceText font-weight_bold">未使用：{{packAgeCardInfo?.num}}</span>
          </div>

        </div>

        <el-form ref="form"
                 @submit.native.prevent
                 :model="form"
                 label-width="100px">
          <el-form-item label="核销码:"
                        prop="auth_code">

            <el-input clearable
                      ref="InputWarp"
                      v-focus
                      :maxlength="100"
                      @keyup.native="handleKeyUp"
                      v-model="verification_code"
                      placeholder="核销参数">
            </el-input>

          </el-form-item>

        </el-form>

        <el-button class="fixed"
                   :loading="loading"
                   v-if="packAgeCardInfo"
                   @click="immediateDeduction()"
                   type="primary"
                   style="margin-left: 16px;">
          立即抵扣
        </el-button>
      </div>
      <!-- 余额充值 -->
      <el-drawer title="订单结算"
                 :visible.sync="drawer"
                 :before-close="handleClose">
        <div class="padding15 ">
          <div style="height: 150px;"
               class="flex-column">
            <div class="font-weight font-size_24px">结算金额:<span style="color: red;">￥{{form.amount?form.amount:form.changeValue}}</span></div>
            <div class="margin-top_16px"
                 v-if="form.amount">包含赠送{{form.give_amount}}元余额</div>
          </div>
          <div class="m-bottom10 ">
            线上扫码
          </div>
          <div class="flex-wrap-justifyBetween">
            <div v-for="(item,index) in paymentTypeList"
                 :key="index"
                 v-show="item.text">
              <div @click="xSswitchRechargePrice(index,item)"
                   :class="['flex-column',xScurrentIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
                <div class="flex">

                  <img class="avater"
                       :src="item.img"
                       alt="">

                  <div class="">
                    <span style="color: rgb(51, 51, 51);">{{item.text}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class=" m-top10">
            线下扣款
          </div>
          <div class="flex-wrap-justifyBetween "
               style="margin-bottom: 20px">
            <div v-for="(item,index) in xxPaymentTypeList"
                 :key="index"
                 style="overflow:auto">
              <div @click="xXswitchRechargePrice(index)"
                   :class="['flex-column',xXcurrentIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
                <div class="flex">

                  <img class="avater"
                       :src="item.img"
                       alt="">

                  <div class="">
                    <span style="color: rgb(51, 51, 51);">{{item.text}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-form v-if="isShowCode"
                   ref="form"
                   @submit.native.prevent
                   :model="form"
                   label-width="100px">
            <el-form-item label="条形码:"
                          prop="auth_code">

              <el-input clearable
                        ref="InputWarp"
                        v-focus
                        :maxlength="100"
                        @keyup.native="handleKeyUp"
                        v-model="form.auth_code"
                        placeholder="条形码参数">
              </el-input>

            </el-form-item>

          </el-form>
          <el-button class="fix flex "
                     type="primary"
                     :loading="loading"
                     @click="balancePayment()">实付：￥{{ form.amount?form.amount:form.changeValue }} </el-button>
        </div>
      </el-drawer>
      <!-- 套餐卡结算 -->
      <el-drawer title="套餐卡结算"
                 :visible.sync="drawerPackCard"
                 :before-close="handleClose">
        <div v-if="packageCardInformation"
             class="padding15">
          <div style="font-size: 20px;font-weight: 600;">
            {{packageCardInformation.name}}{{'('+packageCardInformation.number+')'}}
          </div>
          <div style="margin: 10px 0;color: rgb(102, 102, 102);font-size: 15px;">
            {{packageCardInformation.desc}}
          </div>
          <!-- 选择套餐 -->
          <div class="packagePop">
            <div class="flex-start-center">
              <div class="packageTitle">

              </div>
              <div>
                选择套餐
              </div>
            </div>
          </div>
          <!-- 套餐内容 -->
          <div class="flex-wrap">
            <div class="packagePopConent flex-column">
              <div class="packageColor">
                ￥{{packageCardInformation.price}}
              </div>
              <div style="color: rgb(51, 51, 51);font-size: 12px;font-weight: 400;">
                {{packageCardInformation.number}}次套餐卡
              </div>
              <!-- 	<view class="sign flex">
								  再送5次
							  </view> -->
            </div>

          </div>
          <div>当前{{userInfo.level_name}}折扣{{discountPackage}}折 实付: <span style="color: red;">{{	(Math.floor(packageCardInformation.price* Number(discountPackage) ) / 100).toFixed(2) }}</span></div>
          <!-- 说明介绍 -->
          <div class="packagePop"
               style="margin-top: 18px;">
            <div class="flex-start-center">
              <div class="packageTitle">

              </div>
              <div>
                说明介绍
              </div>

            </div>
            <div style="margin-top: 20px;"
                 v-html="packageCardInformation.remark">

            </div>
          </div>

          <el-form ref="form"
                   label-position="top"
                   @submit.native.prevent
                   :model="form"
                   label-width="100px">
            <el-form-item label="支付类型:"
                          prop="name">
              <div class="flex-wrap-justifyBetween">
                <div v-for="(item,index) in packageTypeList"
                     :key="index"
                     v-show="item.text">
                  <div @click="switchPackage(index,item)"
                       :class="['flex-column',packageIndex == index?'cashierSelectionContent':'cashierSelectionContent-noActive']">
                    <div class="flex">

                      <img class="avater"
                           :src="item.img"
                           alt="">

                      <div class="">
                        <span style="color: rgb(51, 51, 51);">{{item.text}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item v-if="package_way!=1"
                          label="条形码:"
                          prop="name">

              <el-input clearable
                        ref="InputWarp"
                        v-focus
                        :maxlength="100"
                        @keyup.native="handleKeyUp"
                        v-model="auth_code"
                        placeholder="条形码参数">
              </el-input>

            </el-form-item>
            <el-form-item v-else
                          label="余额码:"
                          prop="name">
              <el-input clearable
                        ref="InputWarp"
                        v-focus
                        :maxlength="100"
                        @keyup.native="handleKeyUp"
                        v-model="random_code"
                        placeholder="余额码参数" />
            </el-form-item>
          </el-form>
          <el-button class="fix flex "
                     type="primary"
                     :loading="packageloading"
                     @click="packageOrder()">立即开卡</el-button>

        </div>

      </el-drawer>
      <open-image ref="image"
                  @getImage="show"></open-image>
    </div>
    <div v-else>

      <!-- 自定义提示文字 -->
      <ele-empty class="flex-column"
                 style="height: 337px;"
                 text="哎呀, 还没有数据~" />

    </div>
    <role-edit :data="current"
               @Refresh="RefreshFn"
               :drawerEditBoolen.sync="drawerEditBoolen" />
  </el-card>

</template>
	  
  <script>
import { createGoodsOrder, consumptionDiscount } from '@/api/order/goodsOrderList'
import { payAmountList } from '@/api/rechargeList/index'
import { rechargeOrder } from '@/api/order/goodsOrderList'
import { createPackageOrder, userPackageInfo, packageDiscount, usePackage } from '@/api/order/packCardApi'
import OpenImage from '@/views/dashboard/workplace/components/open-image.vue'
import { gooodsdiscount, userCouponList, } from '@/api/order/cashierRecharge'
import { packageOrderList } from '@/api/order/packCardApi'
import { config } from '@/api/config/index'
import RoleEdit from './role-edit.vue';
import Vue from 'vue'

export default {
  components: { OpenImage, RoleEdit },
  props: {
    userInfo: Object,
    cancelCouponIndex: Number
  },

  data () {
    return {
      // 是否显示编辑弹窗
      drawerEditBoolen: false,
      //  是否可以下拉
      isSelect: false,
      drawerPackCard: false,
      packageCardInformation: null,
      count: 10,
      balanceRechargeList: [],
      currentIndex: 0,
      xScpcurrentIndex: 0,
      xXcpcurrentIndex: 100,
      //  线上扫码
      xScurrentIndex: 0,
      loading: false,
      //   线下
      xXcurrentIndex: 100,
      goodsInfoBol: false,
      drawer: false,
      cashierType: 1,
      vModelValue: '',
      checked: false,
      packageloading: false,
      deduction_integral_ratio: null,
      discount: null,
      //   消费
      consumptionList: [{
        img: require('../../../../assets/PC收银/组合 1051.png'),
        text: '余额支付'
      }, {
        img: require('../../../../assets/PC收银/组合 1052.png'),
        text: '微信充值'
      }, {
        img: require('../../../../assets/PC收银/组合 467.png'),
        text: '支付宝充值'
      }, {

      }],
      packageTypeList: [{
        img: require('../../../../assets/PC收银/组合 1051.png'),
        text: '余额支付'
      }, {
        img: require('../../../../assets/PC收银/组合 1052.png'),
        text: '微信充值'
      }, {
        img: require('../../../../assets/PC收银/组合 467.png'),
        text: '支付宝充值'
      }, {

      }],

      paymentTypeList: [{
        img: require('../../../../assets/PC收银/组合 1052.png'),
        text: '微信充值'
      }, {
        img: require('../../../../assets/PC收银/组合 467.png'),
        text: '支付宝充值'
      }, {

      }],
      xxPaymentTypeList: [{
        img: require('../../../../assets/PC收银/组合 1052.png'),
        text: '微信充值'
      }, {
        img: require('../../../../assets/PC收银/组合 467.png'),
        text: '支付宝充值'
      }, {
        img: require('../../../../assets/PC收银/组合 1051.png'),
        text: '现金充值'
      }, {
        img: require('../../../../assets/PC收银/组合 1053.png'),
        text: 'pos机充值'
      }],
      // 套餐卡
      auth_code: '',
      random_code: '',
      verification_code: '',
      form: {
        id: '',

        balance: '',
        integral: '',
        // 充值余额
        amount: '',
        // 其他余额
        changeValue: '',
        give_amount: '',
        // 类型
        type: 6,
        auth_code: ''


      },
      consumptionform: {
        amount: '',
        pay_way: 1,
        random_code: '',
        auth_code: ''

      },
      goodsform: {
        id: '',

        number: 1,
        amount: '',
        coupon_id: '',
        points_offset: 0
      },
      packageOrderLists: [],
      couponLists: [],
      page: 1,
      pageCoupon: 1,
      disabled: false,
      disabledCoupon: false,
      packageCount: '',
      couponCount: '',
      // 商品详情
      goodsInfo: null,

      selectCouponIndex: 100,
      discountPrice: '',
      configInfo: null,
      discountPackage: null,
      realBarcode: "",
      keyupLastTime: undefined,
      package_way: 1,
      packageIndex: 0,
      isShowGoodsInfoBool: false,
      isShowCode: true,
      couponloading: false,
      packAgeCardInfo: null,
      current: null,
      ispricezero: false,
      balanceRecharge: false,
      packageSettlement: false,
      consumptionDrawer: false,
      consumptionSettlement: false,
      consumptionDiscount: '',
      isWriteOff: false,
      //   


    }
  },
  created () {
    this.configFn()
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    finalPrice: function () {
      return function (price, couponPrice) {
        let result
        // console.log(price, Number(couponPrice))
        result = (Math.floor(price * Number(this.discount)) / 100).toFixed(2)

        // result = (price * this.discount) / 100
        if (this.goodsInfo.buying_pattern == 1) {
          result = (result - Number(couponPrice)) - this.deduction_integral_ratio;

        } else {
          result = result - couponPrice;
        }
        if (result < 0) {
          if (this.goodsInfo.buying_pattern == 1) {
            this.ispricezero = true

            // 如果没有用优惠券那么就是 
            if (couponPrice) {

              this.deduction_integral_ratio = Math.max(0, this.deduction_integral_ratio - Math.abs(result).toFixed(2))
              console.log(this.deduction_integral_ratio)

            } else {
              this.deduction_integral_ratio = price
            }
          }

        } else {
          this.ispricezero = false
        }
        // result = result - couponPrice;
        this.form.amount = Math.max(0.01, result.toFixed(2))
        this.$emit('showSettlement', true)
        this.$emit('totlelPrice', {
          // 支付价格
          finalPrice: Math.max(0.01, result.toFixed(2)),
          //优惠券价格
          couponPrice: couponPrice,
          //  抵扣价格
          deduction_integral_ratio: this.deduction_integral_ratio,
          //   原价
          originalPrice: this.goodsInfo.price * Number(this.goodsform.number),
          // 数量
          number: this.goodsform.number,
          // 商品id
          goods_id: this.goodsInfo.id,
          // 用户id 
          uid: this.userInfo.id,
          //   是否进行积分抵扣
          points_offset: this.goodsform.points_offset,
          //   积分
          surplus_integral: this.userInfo.surplus_integral,
          pay_way: 1,
          coupon_id: this.goodsform.coupon_id,
          balance: this.userInfo.balance

        })
        return Math.max(0.01, result.toFixed(2));    // 防止出行负数

      };


    },
    extractedDate: function () {
      return function (time) {

        return time.split(' ')[0];
      };
    },

    totelName: function () {
      return function (nums) {
        let num
        if (nums.endsWith(".00")) {
          num = nums.slice(0, -3); // 去除末尾的 ".00"
        }
        if (nums >= 10000) {
          let remainder = num % 10000;
          let quotient = Math.floor(num / 10000);
          let decimal = Math.floor(remainder / 1000);
          return quotient + '.' + decimal + '万';
        } else {

          return num ? num : nums;
        }
      };
    },
  },

  methods: {
    RefreshFn () {
      this.pageCoupon = 1
      this.couponLists = []
      this.couponListFn()
    },
    //  领券
    couponCollection () {

      this.drawerEditBoolen = !this.drawerEditBoolen
      this.current = this.userInfo.id
      console.log(this.drawerEditBoolen)
    },
    handleKeyUp (e) {
      console.log(e)
      let gap = 0;
      if (this.keyupLastTime) {
        gap = new Date().getTime() - this.keyupLastTime;
        if (gap > 50) {
          gap = 0;
          this.realBarcode = "";
        }
      }
      this.keyupLastTime = new Date().getTime();
      // 输入法会触发keyup事件，key为Process，跳过即可
      if (e.key != "Process" && gap < 50) {
        if (e.key.trim().length == 1) {
          // 输入单个字母或者数字
          this.realBarcode += e.key;
        } else if (e.key.trim() == "Enter") {
          console.log('结束了')
          // 根据规则，判断barcode类型，返回数据（自定义规则）
          if (this.realBarcode) {

            //  余额操作
            if (this.drawer) {
              this.form.auth_code = this.realBarcode;
            } else {
              if (this.cashierType == 1) {
                if (this.consumptionform.pay_way == 1) {
                  this.consumptionform.random_code = this.realBarcode;
                } else {
                  this.consumptionform.auth_code = this.realBarcode;
                }
              }
              // 套餐卡操作
              if (this.cashierType == 3) {
                if (this.package_way == 1) {
                  this.random_code = this.realBarcode;
                } else {
                  this.auth_code = this.realBarcode;
                }
              }
              //   核销套餐卡操作
              if (this.cashierType == 4) {
                this.isWriteOff = false
                this.verification_code = this.realBarcode
                console.log('核销套餐卡操作')
                this.packAgeInfo()
              }
            }


            this.realBarcode = "";
          } else {

            return;
          }
        }
      }

    },



    // 套餐卡订单
    async packageOrder () {
      this.packageloading = true
      if (this.package_way == 1) {
        if (!this.random_code) {
          this.$message.error('请用扫描枪获取余额码参数')
          this.packageloading = false
          this.$nextTick(() => {
            this.$refs.InputWarp.focus();
            Vue.directive('focus', {
              inserted: function (el) {
                el.querySelector('input').focus()
              },
              update: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
              }

            })
          })

          return false
        } else {
          const res = await createPackageOrder({
            id: this.packageCardInformation.id,
            uid: this.userInfo.id,
            pay_way: this.package_way,
            auth_code: this.auth_code,
            random_code: this.random_code
          })
          if (res.code == 0) {
            this.packageloading = false
            this.$message.success(res.msg
            )
            this.$nextTick(() => {
              this.drawerPackCard = false
            })
            this.packageSettlement = true
            this.$emit('packageSettlement', this.packageSettlement)

          } else {
            this.packageloading = false
            this.$message.error(res.message
            )
          }
        }

      } else if (this.package_way == 7 || this.package_way == 8) {
        if (!this.auth_code) {
          this.packageloading = false
          this.$message.error('请用扫描枪获取微信支付参数')
          this.$nextTick(() => {
            this.$refs.InputWarp.focus();
            Vue.directive('focus', {
              inserted: function (el) {
                el.querySelector('input').focus()
              },
              update: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
              }

            })
          })

          return false
        } else {
          const res = await createPackageOrder({
            id: this.packageCardInformation.id,
            uid: this.userInfo.id,
            pay_way: this.package_way,
            auth_code: this.auth_code,
            random_code: this.random_code
          })
          if (res.code == 0) {
            this.packageloading = false
            this.$message.success(res.msg
            )
            this.$nextTick(() => {
              this.drawerPackCard = false
            })
            this.packageSettlement = true
            this.$emit('packageSettlement', this.packageSettlement)
          } else {
            this.packageloading = false
            this.$message.error(res.message
            )
          }
        }
      }



    },

    async immediateDeduction () {
      if (this.verification_code) {
        this.$nextTick(() => {
          this.$refs.InputWarp.focus();
          Vue.directive('focus', {
            inserted: function (el) {
              el.querySelector('input').focus()
            },
            update: function (el) {
              // 聚焦元素
              el.querySelector('input').focus()
            }

          })
        })
        if (!this.isWriteOff) {
          this.loading = true
          const res = await usePackage({
            uid: this.packAgeCardInfo.uid,
            id: this.packAgeCardInfo.id,
            rand_code: this.packAgeCardInfo.rand_code,
          })
          if (res.code == 0) {

            this.loading = false
            this.isWriteOff = true
            this.packAgeInfo()
            this.$message.success(res.message)
          } else {
            this.isWriteOff = false
            this.loading = false
            this.$message.error(res.msg)
          }
        } else {
          this.$message.success('该套餐卡已经核销,请扫码重试', 'none')
        }
      } else {
        this.$message.error('请使用扫码枪扫码', 'none')
      }


    },
    // 套餐卡信息
    async packAgeInfo () {

      const res = await userPackageInfo({
        id: this.verification_code
      })
      if (res.code == 0) {
        this.packAgeCardInfo = res.data
      }
    },
    async consumptionSettlementFn () {
      this.consumptionform.auth_code = ''
      this.consumptionform.random_code = ''
      this.consumptionSettlement = false
      this.$emit('consumptionSettlement', this.consumptionSettlement)
      // this.balanceRecharge = false
      // this.$emit('balanceRecharge', this.balanceRecharge)
      //   this.form.auth_code = ''
      if (this.consumptionform.amount) {
        this.consumptionDrawer = true

        const res = await consumptionDiscount({
          uid: this.userInfo.id,
        })

        if (res.code == 0) {
          this.consumptionDiscount = res.data.discount
        }
        // console.log(res.)


        this.$nextTick(() => {
          this.$refs.InputWarp.focus();
          Vue.directive('focus', {
            inserted: function (el) {
              el.querySelector('input').focus()
            },
            update: function (el) {
              // 聚焦元素
              el.querySelector('input').focus()
            }

          })
        })

        console.log(this.form, this.userInfo)

      } else {
        this.$message.error('请选择扣款的金额')
        this.drawer = false
      }
    },
    nextStep () {
      this.balanceRecharge = false
      this.$emit('balanceRecharge', this.balanceRecharge)
      this.form.auth_code = ''
      if (this.form.amount || this.form.changeValue) {
        this.drawer = true
        this.$nextTick(() => {
          this.$refs.InputWarp.focus();
          Vue.directive('focus', {
            inserted: function (el) {
              el.querySelector('input').focus()
            },
            update: function (el) {
              // 聚焦元素
              el.querySelector('input').focus()
            }

          })
        })

        console.log(this.form, this.userInfo)

      } else {
        this.$message.error('请选择金额或者输入金额')
        this.drawer = false
      }
    },
    // 消费付款
    async consumptionPayment () {

      this.loading = true
      if (this.consumptionform.pay_way == 1) {
        if (!this.consumptionform.random_code) {
          this.$message.error('请用扫描枪获取余额码参数')
          this.loading = false
          this.$nextTick(() => {
            this.$refs.InputWarp.focus();
            Vue.directive('focus', {
              inserted: function (el) {
                el.querySelector('input').focus()
              },
              update: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
              }

            })
          })

          return false
        } else {

          console.log(this.consumptionform)
          const res = await createGoodsOrder({
            ...this.consumptionform,
            uid: this.userInfo.id,
          })
          if (res.code == 0) {
            this.loading = false
            this.$message.success(res.msg
            )
            this.$nextTick(() => {
              this.consumptionDrawer = false
            })
            this.consumptionSettlement = true
            this.$emit('consumptionSettlement', this.consumptionSettlement)

          } else {
            this.loading = false
            this.$message.error(res.msg
            )
          }
        }

      } else if (this.consumptionform.pay_way == 7 || this.consumptionform.pay_way == 8) {
        if (!this.consumptionform.auth_code) {
          this.loading = false
          this.$message.error('请用扫描枪获取支付参数')
          this.$nextTick(() => {
            this.$refs.InputWarp.focus();
            Vue.directive('focus', {
              inserted: function (el) {
                el.querySelector('input').focus()
              },
              update: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
              }

            })
          })

          return false
        } else {

          console.log(this.consumptionform)
          const res = await createGoodsOrder({
            ...this.consumptionform,
            uid: this.userInfo.id,
          })
          if (res.code == 0) {
            this.loading = false
            this.$message.success(res.msg
            )
            this.$nextTick(() => {
              this.consumptionDrawer = false
            })
            this.consumptionSettlement = true
            this.$emit('consumptionSettlement', this.consumptionSettlement)
          } else {
            this.loading = false
            this.$message.error(res.msg
            )
          }
        }
      } else {

        // this.loading = false
        console.log(this.consumptionform)
        const res = await createGoodsOrder({
          ...this.consumptionform,
          uid: this.userInfo.id,
        })
        if (res.code == 0) {
          this.loading = false
          this.$message.success(res.msg
          )
          this.$nextTick(() => {
            this.consumptionDrawer = false
          })
          this.consumptionSettlement = true
          this.$emit('consumptionSettlement', this.consumptionSettlement)
        } else {
          this.loading = false
          this.$message.error(res.msg
          )
        }
        console.log(this.consumptionform)
      }



    },

    // 余额付款
    async balancePayment () {
      if (this.form.type == 6 || this.form.type == 7) {
        if (!this.form.auth_code) {
          this.$message.error('请用扫描枪获取微信支付参数')
          this.$nextTick(() => {
            this.$refs.InputWarp.focus();
            Vue.directive('focus', {
              inserted: function (el) {
                el.querySelector('input').focus()
              },
              update: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
              }

            })
          })

          return false
        }
      }
      // rechargeOrder  
      this.loading = true
      const res = await rechargeOrder({
        type: this.form.type,
        auth_code: this.form.auth_code,
        amount: this.form.amount ? this.form.amount : this.form.changeValue,
        id: this.userInfo.id
      })
      console.log(res)
      if (res.code == 0) {
        this.loading = false

        this.balanceRecharge = true
        this.$message.success(res.msg)
        // 余额充值如果实付成功需要筛选用户信息
        this.$emit('balanceRecharge', this.balanceRecharge)
        this.$nextTick(() => {
          this.drawer = false
        })

      } else {
        this.loading = false
        this.$message.error(res.msg)
      }
    },
    async configFn () {
      const res = await config()
      if (res.code == 0) {
        this.configInfo = res.data
      }
    },
    changeNumber (num) {
      console.log(num)
      this.goodsform.number = num
      this.checked = false
      this.deduction_integral_ratio = 0
      this.goodsform.points_offset = 0
    },
    // 选择商品
    cs () {
      this.$nextTick(() => {
        this.$refs['image'].show()
      })
    },
    // 显示视频详情列表
    show (e) {
      console.log("show===========e", e)
      this.goodsInfo = e
      this.goodsInfoBol = false
      // 是否显示商品
      this.isShowGoodsInfoBool = true
      this.init()
      this.discountPrice = 0
      this.selectCouponIndex = 100
      this.pageCoupon = 1
      this.couponLists = []
      this.couponListFn()

    },
    async init () {
      const res = await gooodsdiscount({
        goods_id: this.goodsInfo.id,
        uid: this.userInfo.id
      })
      console.log(res)
      if (res.code == 0) {

        this.discount = res.data.discount
      }
      console.log(this.userInfo.id)

    },
    radioChange (e) {
      console.log(e)
      this.checked = e
      if (e) {
        // 获取积分进行抵扣
        this.goodsform.points_offset = 1
        // if (res.code == 0) {
        // 	const ress = res.data.deduction_integral_ratio
        // 	console.log(ress)
        this.deduction_integral_ratio = Math.floor((this.userInfo.surplus_integral / Number(this.configInfo.deduction_integral_ratio)) *
          100) / 100;
        console.log('deduction_integral_ratio', this.deduction_integral_ratio)
        // } else {
        // 	this.$sun.navGo(res.msg, 'none')
        // }
      } else {
        this.deduction_integral_ratio = 0
        this.goodsform.points_offset = 0
      }
    },
    async cardPurchase (item) {

      this.packageSettlement = false
      this.$emit('packageSettlement', this.packageSettlement)
      const res = await packageDiscount({
        uid: this.userInfo.id
      })
      console.log(res)

      this.discountPackage = res.discount

      console.log(this.userInfo)
      console.log(res)
      this.packageCardInformation = item
      this.drawerPackCard = true
      if (this.package_way == 1) {
        this.random_code = this.realBarcode;
      } else {
        this.auth_code = this.realBarcode;
      }
      this.$nextTick(() => {
        this.$refs.InputWarp.focus();
        Vue.directive('focus', {
          inserted: function (el) {
            el.querySelector('input').focus()
          },
          update: function (el) {
            // 聚焦元素
            el.querySelector('input').focus()
          }

        })
      })
    },
    noMore () {
      return this.packageOrderLists.length >= this.packageCount
    },
    noMoreCoupon () {
      return this.couponLists.length >= this.couponCount
    },
    receiveCoupons (item, index) {
      console.log(this.selectCouponIndex, index)
      if (this.selectCouponIndex == index) {
        console.log('取消选择', this.selectCouponIndex, index)
        this.selectCouponIndex = 100
        this.discountPrice = 0
        if (this.ispricezero) {
          this.checked = false
        }

        this.goodsform.coupon_id = ''
      } else {
        if (item.type !== 3 && this.goodsInfo.price * Number(this.goodsform.number) < item.trigger_amount) {

          this.$message({
            message: '优惠券不满足当前状态',
            type: 'warning'
          });
          return
        } else {
          this.selectCouponIndex = index

          this.goodsform.coupon_id = item.id
          console.log(item)
          // 这里需要判断当前的余额是否大于优惠卷 如果优惠券大于余额不可以折扣（前提是满减券和新人券）


          this.discountPrice = item.discount_intensity
        }

      }
      // this.$refs.receiveCouponPopup.close()

    },
    // 1 消费扣款 2余额充值 3开通套餐卡 4自提商品核销
    load () {
      console.log('11111')
      if (this.packageCount != this.packageOrderLists.length) {
        this.handleCommand('3');
      } else {
        this.disabled = true;
      }
    },
    loadCoupon () {
      console.log('11111')
      if (this.couponCount != this.couponLists.length) {
        this.couponListFn();
      } else {
        this.disabledCoupon = true;
      }
    },
    // 优惠券


    async couponListFn () {

      this.couponloading = true
      const res = await userCouponList({
        page: this.pageCoupon,
        limit: 10,
        classify_id: this.goodsInfo.classify_id,
        uid: this.userInfo.id
      })

      if (res.code == 0) {
        this.couponloading = false
        //   this.packageOrderLists = res.data.list
        this.couponCount = res.data.count


        if (this.couponCount == this.couponLists.length) {
          this.disabledCoupon = true;
        } else {
          this.couponLists = [...this.couponLists, ...res.data.list];
          console.log(this.couponLists)
          this.pageCoupon += 1;
          this.disabledCoupon = false;
        }


      } else {
        this.couponloading = false
        console.log(res)
      }
    },
    async handleCommand (e) {

      console.log(e, 'showSettlement============')
      //   if (e == 1) {
      //     this.$emit('showSettlement', true)

      //   } else {
      //     this.$emit('showSettlement', false)
      //   }
      this.cashierType = e
      if (e == '2') {
        const res = await payAmountList()


        this.balanceRechargeList = res.list
        this.currentIndex = 0
        this.form.amount = res.list[this.currentIndex].amount
        this.form.give_amount = Number(res.list[this.currentIndex].give_amount)


      } else if (e == '3') {
        this.loading = true
        const res = await packageOrderList({
          page: this.page,
          limit: 10
        })

        if (res.code == 0) {
          this.loading = false
          //   this.packageOrderLists = res.data.list
          this.packageCount = res.data.count


          if (this.packageCount == this.packageOrderLists.length) {
            this.disabled = true;
          } else {
            this.packageOrderLists = [...this.packageOrderLists, ...res.data.list];
            this.page += 1;
            this.disabled = false;
          }


        } else {
          this.loading = false
          console.log(res)
        }

      } else {
        this.$nextTick(() => {
          this.$refs.InputWarp.focus();
          Vue.directive('focus', {
            inserted: function (el) {
              el.querySelector('input').focus()
            },
            update: function (el) {
              // 聚焦元素
              el.querySelector('input').focus()
            }

          })
        })
        // userPackageInfo
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    focusInput () {
      console.log('1231')
      // 在线充值列表失去焦点
      this.currentIndex = 200
      this.form.amount = ''
    },
    switchRechargePrice (index, item) {
      this.form.changeValue = ''
      this.form.amount = Number(item.amount)
      this.form.give_amount = Number(item.give_amount)
      this.currentIndex = index
    },
    switchPackage (index,) {
      this.auth_code = '',
        this.random_code = ''
      this.$nextTick(() => {
        this.$refs.InputWarp.focus();
        Vue.directive('focus', {
          inserted: function (el) {
            el.querySelector('input').focus()
          },
          update: function (el) {
            // 聚焦元素
            el.querySelector('input').focus()
          }

        })
      })
      console.log(index)
      if (index == 1) {
        this.package_way = 7
        console.log('线上微信充值')
      } else if (index == 2) {
        this.package_way = 8
        console.log('线上支付宝充值')
      } else {
        this.package_way = 1
      }
      this.packageIndex = index
    },
    consumptionRechargePrice (index) {
      this.consumptionform.auth_code = ''
      this.consumptionform.random_code = ''
      this.$nextTick(() => {
        this.$refs.InputWarp.focus();
        Vue.directive('focus', {
          inserted: function (el) {
            el.querySelector('input').focus()
          },
          update: function (el) {
            // 聚焦元素
            el.querySelector('input').focus()
          }

        })
      })
      console.log(this.consumptionform.pay_way)

      if (index == 1) {
        this.consumptionform.pay_way = 7
        console.log('线上微信抵扣')
      } else if (index == 0) {
        this.consumptionform.pay_way = 1
        console.log('余额抵扣')
      } else {
        this.consumptionform.pay_way = 8
        console.log('线上支付宝充值')
      }
      this.xScpcurrentIndex = index
      //  线上扫码
      this.xXcpcurrentIndex = 100

    },
    xXconsumptionPrice (index) {
      this.consumptionform.auth_code = ''
      this.consumptionform.random_code = ''
      this.isShowCode = false

      if (index == 0) {
        this.consumptionform.pay_way = 3
        console.log('线下微信充值')
      } else if (index == 1) {
        this.consumptionform.pay_way = 4
        console.log('线下支付宝充值')
      } else if (index == 2) {
        this.consumptionform.pay_way = 5
        console.log('现金充值')
      } else if (index == 3) {
        this.consumptionform.pay_way = 6
        console.log('pos充值')
      }
      console.log(index)
      //   线下
      this.xScpcurrentIndex = 100
      this.xXcpcurrentIndex = index
    },
    xSswitchRechargePrice (index) {
      this.form.auth_code = ''
      this.$nextTick(() => {
        this.$refs.InputWarp.focus();
        Vue.directive('focus', {
          inserted: function (el) {
            el.querySelector('input').focus()
          },
          update: function (el) {
            // 聚焦元素
            el.querySelector('input').focus()
          }

        })
      })
      console.log(index)
      this.isShowCode = true
      if (index == 0) {
        this.form.type = 6
        console.log('线上微信充值')
      } else {
        this.form.type = 7
        console.log('线上支付宝充值')
      }
      this.xScurrentIndex = index
      //  线上扫码
      this.xXcurrentIndex = 100

    },
    xXswitchRechargePrice (index) {

      this.isShowCode = false

      if (index == 0) {
        this.form.type = 2
        console.log('线下微信充值')
      } else if (index == 1) {
        this.form.type = 3
        console.log('线下支付宝充值')
      } else if (index == 2) {
        this.form.type = 4
        console.log('现金充值')
      } else if (index == 3) {
        this.form.type = 5
        console.log('pos充值')
      }
      console.log(index)
      //   线下
      this.xScurrentIndex = 100
      this.xXcurrentIndex = index
    },


  },
  watch: {


    cancelCouponIndex: {
      handler (newVal) {
        if (newVal) {
          console.log(newVal, 'cancelCouponIndex触发；1================')
          this.selectCouponIndex = 100
          this.discountPrice = 0
          this.pageCoupon = 1
          this.couponLists = []
          this.couponListFn()
          //   
        }
      },
    },
    userInfo: {
      handler (newVal) {
        if (newVal) {
          console.log(newVal)
          this.isSelect = true
          // this.cashierType = 1
          this.goodsInfoBol = true
          //   
        } else {
          console.log(newVal)
          this.isSelect = false
        }
      },
      deep: true // 指定深度监听
    }
  }
};
  </script>
	  
  <style lang="less" scoped>
/deep/ .el-form-item__label {
  width: 60px !important;
}
.analysis-chart-card {
  font-size: 15px;
  position: relative;
  //   height: 456px;
  background-color: #fff;
  .content {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
    background: rgb(255, 242, 242);

    .positionCoupon {
      padding: 4px;
      width: 72px;
      height: 25px;
      border-radius: 10px 0px 10px 0px;
      color: rgb(255, 0, 0);
      background: rgb(255, 219, 219);
      font-size: 12px;
    }

    .couponPrice {
      padding: 10px 13px;

      .left {
        margin-right: 16px;
      }

      .claimNow {
        width: 77px;
        height: 29px;
        border-radius: 17px;
        color: #fff;
        background: rgb(255, 0, 0);
      }
    }
  }
  .packagePop {
    margin-bottom: 30px;

    .packageTitle {
      width: 8px;
      height: 30px;
      background: rgb(255, 0, 0);
      margin-right: 10px;
    }
  }
  .orderPageDetail {
    margin-top: 10px;
    padding: 20px;
    width: 100%;
    background: rgb(255, 255, 255);

    .orderPageDescribe {
      // padding-right: 90px;

      .imgav {
        width: 180px !important;
        height: 180px !important;
      }
    }

    .Deduction {
      margin-top: 23px;
    }
  }
  .packagePopConent {
    width: 141.54px;
    height: 78px;
    margin-right: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 2px solid rgb(255, 167, 167);
    border-radius: 20px;
    position: relative;
    background: rgb(255, 249, 249);

    .sign {
      padding: 8px;
      top: -10px;
      left: -10px;
      position: absolute;

      height: 40px;
      color: rgb(255, 255, 255);

      font-size: 12px;
      font-weight: 400;
      border-radius: 12px;

      background: rgb(255, 0, 0);
    }
  }

  .packageColor {
    color: rgb(255, 0, 0);
    font-size: 20px;
    font-weight: 600;
  }

  .packageColor-noActive {
    color: rgb(51, 51, 51);
    font-size: 20px;
    font-weight: 600;
  }

  .packagePopConent-noActive {
    width: 141.54px;
    height: 78px;
    margin-right: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 1px solid rgb(225, 225, 225);
    border-radius: 10px;

    background: rgb(255, 255, 255);
  }
  .packageCardArr {
    position: relative;
    margin-top: 32px;
    padding: 25px 20px;
    height: 108px;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-size: cover;

    background-image: (var(--bg-image));
    // background-image: url('../../../static/套餐卡背景/矩形 1591.png');

    .avatar {
      width: 34px;
      height: 34px;
    }

    .rechargeBtn {
      width: 61.25px;
      height: 26px;
      border-radius: 20px;
      z-index: 999;
      background: rgb(255, 255, 255);
    }

    .rechargeBtn-noListing {
      width: 110px;
      height: 52px;
      border-radius: 10px;
    }

    .centerText {
      width: 258px;
    }

    .price {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
    }

    .priceText {
      color: rgb(255, 255, 255);
      font-size: 16px;
      font-weight: 400;
    }
  }

  .packageCardArr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
    /* 半透明黑色背景 */
  }
  .avater {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .fixed {
    position: absolute;
    bottom: 10px;
  }
  .fix {
    position: absolute;
    bottom: 50px;
    border-radius: 10px;
    width: 95%;
    height: 64px;
    background: rgb(90, 158, 247);
    color: #fff;
  }
  .cashierSelectionContent {
    margin-top: 15px;

    padding: 15px;
    width: 120px;
    height: 50px;
    border: 2px solid rgb(228, 227, 227);
    background: rgb(255, 246, 246);
  }

  .cashierSelectionContent-noActive {
    margin-top: 15px;

    padding: 15px;
    width: 120px;
    height: 50px;

    border: 2px solid rgb(228, 227, 227);
    background: rgb(255, 255, 255);
  }
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}
</style>
	  